<template>
    <div>
        <!-- 面包屑导航 -->
        <breadcrumb></breadcrumb>
        <div class="control">
            <!-- 全部状态 -->
            <div class="inputItem">
                <div class="title">订单状态</div>
                <div class="inputBox">
                    <el-select class="select" v-model="status" placeholder="请选择">
                        <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">结算单号</div>
                <div class="inputBox">
                    <el-input v-model="orderNumber" @keyup.enter.native="cread"> </el-input>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">项目名称</div>
                <div class="inputBox">
                    <el-input v-model="projectName" @keyup.enter.native="cread"> </el-input>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">货主名称</div>
                <div class="inputBox">
                    <el-input v-model="cargoOwnerName" @keyup.enter.native="cread"> </el-input>
                </div>
            </div>


            <!-- 查询 -->
            <el-button type="primary" size="small" icon="el-icon-search" @click="cread">查询</el-button>
            <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
        </div>
        <div class="main">
            <div class="list">
                <el-table :data="records" style="width: 100%">
                    <el-table-column align="center" prop="serialNumber" label="序号">
                        <!-- 不要再写scope.$index + 1这种方法第二页又从1开始数,后面统一下 你请求列表调我那个前端序号方法 -->
                    </el-table-column>
                    <el-table-column label="订单状态">
                        <template slot-scope="scope">
                            <div class="tag dispatched" v-if="!scope.row.status">
                                <div class="dian"></div>
                                <div class="text">已结算</div>
                            </div>

                            <div class="tag yellow" v-else>
                                <div class="dian"></div>
                                <div class="text">待结算</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="结算编号">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="业务名称">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="司机姓名">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="车辆信息">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="司机金额">
                        <template slot-scope="scope">
                            <!--      <div>{{ scope.row.qian == null ? '--.--' : scope.row.qian + '元' }}</div> -->
                            <div>xxx元</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="结算金额">
                        <template slot-scope="scope">
                            <!--      <div>{{ scope.row.qian == null ? '--.--' : scope.row.qian + '元' }}</div> -->
                            <div>xxx元</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="createTime" label="创建时间" sortable></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" size="small">详情</el-button>
                            </div>
                            <div>
                                <el-button type="text" size="small">结算</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="text" size="small" @click="$router.push({path:'/financialManagement/financialSettlement/Details',query:{orderNumber:'65454'}})">测试详情</el-button>
                <el-button type="text" size="small" @click="$router.push({path:'/financialManagement/financialSettlement/Details',query:{orderNumber:'65454'}})">测试结算</el-button>
            </div>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
                    :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
                    <template slot>
                        <span style="
                  color: #686868;
                  font-size: 12px;
                  margin-right: 20px;
                  display: inline-block;
                ">共{{ data.total }}条,每页{{ pageSize }}条</span>
                    </template>
                </el-pagination>
            </div>
        </div>

    </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";

export default {
    data() {
        return {
            /* 搜索start */
            orderNumber: "",  //结算单号
            cargoOwnerName: "", //货主名称
            projectName:"", 
            status: "",
            statusArr: [
                { label: "待结算", value: "0" },
                { label: "已结算", value: "1" },
            ],


            form: {},

            /* 搜索end*/
            visiblePaymentBox: false, //打款确认弹窗显示/隐藏
            data: {
                total: "",
                size: "",
                pages: "",
            },
            records: [],
            pageCurrent: 1, //当前页码
            pageSize: "10", //每页10条
        };
    },
    methods: {
        cread(){

        },
        CleanUp() {
            this.applyNumber = ''
            this.driverName = ''
            this.status = ''
            //this.getList()
        },
        getSerialNumber(dataArr) {
            // 前端解决序号
            dataArr.forEach((item, i) => {
                let num = i + 1;
                item.serialNumber = num;
            });
        },
        showPaymentDialog(id) {
            this.visiblePaymentBox = true;
        }

    },
    mounted() {

    },
    components: {
        breadcrumb,
    },
};
</script>
  
<style lang="scss" scoped>
.control {
    height: 76px;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 29px;
    margin-bottom: 8px;

    .inputItem {
        display: flex;
        align-items: center;
        margin-right: 23px;

        >.title {
            color: #262626;
            font-size: 12px;
            margin-right: 7px;
        }

        >.inputBox {
            width: 160px;

            ::v-deep .el-input__inner {
                height: 32px;
                font-size: 12px;
            }

            ::v-deep .el-input__inner::placeholder {
                color: #c3c3c3;
                font-size: 12px;
            }
        }

        ::v-deep .el-input__icon {
            line-height: 0;
        }
    }
}

.main {
    width: 100%;
    height: calc(100vh - 212px);
    background-color: #fff;
    padding: 24px 0 0 0;

    .list {
        height: calc(100% - 48px);
        padding: 0 30px;

        ::v-deep .el-table__body-wrapper {
            max-height: calc(100vh - 335px) !important;
            overflow-y: scroll;
        }

        // 表头样式
        ::v-deep .el-table__header th {
            background-color: #f0f6fd;
            color: #262626;
            font-size: 12px;
            font-weight: bold;
            text-align: center;

            // 表 body的td
            ::v-deep .el-table__body td {
                color: #595959;
                font-size: 12px;
            }
        }

        .tag {
            width: 63px;
            height: 28px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            margin: 0 auto;

            .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin-right: 4px;
            }

            &.yellow {
                background-color: #FFFCE8;
                color: #F9AA0D;

                .dian {
                    background-color: #F9AA0D;
                }
            }

            &.dispatched {
                background-color: #ecf5fe;
                color: #1890ff;

                .dian {
                    background-color: #1890ff;
                }
            }
        }

        .stateBtns {
            height: 30px;
            width: 76px;

            ::v-deep .el-button {
                height: 30px;
                width: 76px;
                font-size: 12px;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 30px;
            }

            .waitPass {
                background-color: #ecf5fe;
                color: #1890ff;
            }

            .noPass {
                background-color: #fde8e9;
                color: #f7555d;
            }
        }
    }

    .paginationBox {
        border-top: 1px solid #f0f0f0;
        width: 100%;
        background-color: #fff;
        display: flex;
        height: 48px;
        align-items: center;
        padding: 0 30px;

        .pagination {
            margin-left: auto;
        }
    }
}


</style>
  